<template>
  <div id="data-view">
    <div class="main-header">
      <div class="title-container">{{i18[lang].title}}</div>
    </div>
    <div class="main-container">
      <div class="m-top-container">
        <div class="table-wrapper">
          <ScrollBoard :config="tbConfig" class="tb-gas" />
        </div>
        <div class="chart-wrapper">
          <el-row class="chart-row" :gutter="10">
            <el-col :span="8" class="custom-loading" v-for="(chartData, index) in charts.dataRow1" :key="index">
              <BorderBox12>
                <GasBar :chart-data="chartData.data" :option="chartData.option" :gb="chartData.gb" :ub="chartData.ub" :unit="chartData.unit" style="height: 100%;" v-if="!chartLoading"></GasBar>
                <loading v-if="chartLoading">加载中...</loading>
              </BorderBox12>
            </el-col>
          </el-row>
          <el-row class="chart-row" :gutter="10">
            <el-col :span="8" class="custom-loading" v-for="(chartData, index) in charts.dataRow2" :key="index">
              <BorderBox12>
                <GasBar :chart-data="chartData.data" :option="chartData.option" :gb="chartData.gb" :ub="chartData.ub" :unit="chartData.unit" style="height: 100%;" v-if="!chartLoading"></GasBar>
                <loading v-if="chartLoading">加载中...</loading>
              </BorderBox12>
            </el-col>
          </el-row>
        </div>
      </div>

      <div class="m-bot-container">
        <div class="legend-area">
          <div v-for="(color, index) in boilerColors"  class="legend-item" :key="index">
            <div class="legend-color" :style="{backgroundColor: color[0]}"></div>
            <div class="legend-name">{{index + 1}}#炉（Boiler {{index + 1}}）</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<!--检测因子 1号炉浓度  炉排炉2号炉 炉排炉3号炉 国标(mg/m3) 欧标(mg/m3)-->
<script lang="ts" setup>
  import { reactive, ref, watch,onMounted } from "vue"
  import { getTempDataApi, getEmissionDataApi } from "./index"
  import dayjs from "dayjs";
  import GasBar from "@/components/chart/GasBar.vue";
  import { BorderBox12, ScrollBoard, Loading } from '@kjgl77/datav-vue3';

  const mainColor = '#FFFFFF' //可控
  const boilerColors = [["#409EFF", "#409EFF"], ["#91CC75", "#91CC75"], ["#FAC858", "#FAC858"]]
  const tableLoading = ref<boolean>(false)
  const chartLoading = ref<boolean>(false)
  const lang = ref('ch')
  const i18 = <any>reactive({
    'ch':{
      title:'烟气数据实时监测（Flue Gas Data Monitoring）'
    },
    'en':{

    }
  })

  //#region 查
  const tableConstants = [
    ['名称（Name）', '单位（Unit）', '1#炉（Boiler 1）','2#炉（Boiler 2）','3#炉（Boiler 3）','国家标准（National Standard）','欧盟标准（EU Standard）','监测日期（Monitoring Date）']
  ]
  const cols = ['炉温 Boiler Temperature （BT）','粉尘 Particulate Matter (PM)','氮氧化物 Nitrogen Oxides (NOx)','二氧化硫 Sulfur Dioxide (SO₂)','氯化氢 Hydrogen Chloride (HCl)','一氧化碳 Carbon Monoxide (CO)']
  const tableData = ref<any>([])
  const charts = reactive({
    dataRow1:[],
    dataRow2:[]
  });
  const chart = reactive({
    data:[],
    option:{}
  })
  const tbConfig = reactive({
    header:[],
    data:[],
    //columnWidth: [360, 150],
    headerBGC: "#051044",
    oddRowBGC: "#02377E",
    evenRowBGC: "#093362",
    rowNum: 5
  })

  const getTableData = () => {
    if(!tableLoading.value){
      tableLoading.value = true
      chartLoading.value = true
      getEmissionDataApi({})
      .then((res) => {
        let tbData = [...tableConstants]
        if (res&&res.length){
          for (let i in res){
            const items = res[i]
            const firstItem = cols[i]
            if(i==0){
              tbData.push([firstItem, "℃", ...items, dayjs().format('YYYY-MM-DD')])
            }
            else{
              tbData.push([firstItem, "mg/m³", ...items, dayjs().format('YYYY-MM-DD')])
            }
          }
        }
        tableData.value = tbData
        tbConfig.header = tbData[0]
        tbConfig.data = tbData.slice(1)
        //tbConfig.rowNum = tbConfig.data.length
        //console.log(tbData)
        setChartData(res)
      })
      .catch(() => {
        tableData.value = []
      })
      .finally(() => {
        tableLoading.value = false
      })
    }
  }

  const setChartData = (datalist) => {
    let fontSize = 22
    let padding = -180
    const windowWidth = window.innerWidth;
    if (windowWidth <= 1024) {
      fontSize = 14
      padding = -180
    }
    else if (windowWidth <= 1180) {
      fontSize = 15
      padding = -220
    }
    else if (windowWidth <= 1366) {
      fontSize = 16
      padding = -250
    }
    else if (windowWidth <= 1500) {
      fontSize = 18
      padding = -280
    }
    else if (windowWidth <= 1900) {
      fontSize = 20
      padding = -310
    }
    else if (windowWidth <= 2400) {
      fontSize = 22
      padding = -330
    }
    else{
      fontSize = 22
      padding = -350
    }
    
    let chartsData = []
    let option = {
      xAxis: {
        axisLine:{
          show:true,
          lineStyle:{
            color:mainColor
          }
        },
        axisLabel:{
          color:mainColor,
          fontSize: fontSize //可控
        },
      },
      yAxis: {
        type: 'value',
        name:'',
        axisLine:{
          show:true,
          lineStyle:{
            color:mainColor
          }
        },
        axisLabel:{
          color:mainColor,
          fontSize: fontSize //可控
        },
        splitLine:{
          show:false,
          lineStyle:{
            color:'rgba(175,175,175,0.8)',
            type:'dashed'
          }
        },
        nameTextStyle:{
          fontSize: fontSize, //可控
          padding:[0,padding,0,0]
        }
      }
    }
    
    for (let i in datalist){
      let dataArr = []
      const xValues = ["1#炉", "2#炉", "3#炉"]
      const items = JSON.parse(JSON.stringify(datalist[i]))
      const yValues =  datalist[i].splice(0,3)
      const name = cols[i]
      const gb = items[3]
      const ub = items[4]
      let unit = i == 0 ? "℃" : "mg/m³"
      //每个锅炉不同颜色
      for (const j in xValues){
        let itemStyle = { 
          //barBorderRadius: [10, 10, 0, 0], // [左上, 右上, 右下, 左下]
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: boilerColors[j][0] }, // 顶部颜色
              { offset: 1, color: boilerColors[j][1] }  // 底部颜色
            ]
          }
        }

        const xVal = xValues[j]
        const data = {
          type: name,
          name: xVal,
          value: {
            value: yValues[j],
            itemStyle: itemStyle
          }
        }
        
        dataArr.push(data)
      }
      
      option.yAxis.name = name
      option.yAxis.max = gb ? Number(gb) + 20 : 1200
      chartsData.push({
        data: dataArr,
        option: JSON.parse(JSON.stringify(option)),
        gb: gb,
        ub: ub,
        unit: unit
      })
    }
    charts.dataRow1 = (JSON.parse(JSON.stringify(chartsData))).splice(0,3)
    charts.dataRow2 = (JSON.parse(JSON.stringify(chartsData))).splice(3)
    //console.log(charts)
    chartLoading.value = false
  }

  onMounted(()=>{
    getTableData()
  })

</script>


<style lang="scss" scoped>
  @mixin backgroundImage($url) {
    background-image: url($url);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  #data-view {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      width: 100%;
      height: 100vh;
      padding:0;
      @include backgroundImage("@/assets/img/bg.png");
      color: #fff;
      overflow: hidden;
      .main-header {
        width: 100%;
        height: 70px;
        display: flex;
        flex-direction: row;
        justify-content:center;
        align-items: flex-end;
        @include backgroundImage("@/assets/img/header_line.png");
        position: relative;
        .title-container {
          margin-bottom: 20px;
          font-weight: bolder;
          font-size: 28px;  /*可控*/
          color: #FFFFFF; /*可控*/
        }
      }
      .main-container {
        position: relative;
        margin: 0;
        display: flex;
        flex-direction: column;
        width: 100%;
        height:calc(100vh - 70px);
        padding: 8px;
        .m-top-container{
          height:calc(100% - 70px);
          .table-wrapper {
            height:25%;
            .tb-gas{
              width:100%;
              height:calc(100% - 20px);
              margin-bottom: 10px;
              margin-top: 10px;
            }
            :deep(.header-item){
              font-size: 22px; /*可控*/
              color: #FFFFFF;/*可控*/
            }
            :deep(.row-item){
              font-size: 22px; /*可控*/
              color: #FFFFFF;/*可控*/
            }
          }
          .chart-wrapper {
            width:100%;
            height: 75%;
            .chart-row{
              height:calc(50% - 10px);
              margin-bottom: 10px;
            }
          }
        }
        .m-bot-container{
          margin-top: 10px;
          position: relative;
          display: flex;
          flex-direction: row;
          justify-content: center;
          width: 100%;
          height: 50px;
          @include backgroundImage("@/assets/img/bot_line.png");
        }
      }
  }
  
  
  /* 去掉背景色 */
  .custom-loading{
    height: 100%;
    .el-loading-mask {
      background-color: transparent !important;
    }
  }
  .legend-area{
    display: flex;
    justify-content: center;
    align-items: center;
    .legend-item{
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: row;
      margin: 0px 10px;
      .legend-color{
        display: inline-block;
        width: 40px;
        height: 20px;
        margin: 1px 10px;
      }
      .legend-name{
        display: inline-block;
        color: #FFFFFF;/*可控*/
        font-size: 22px; /*可控*/
      }
    }
  }
  
</style>

<style lang="scss" scoped>
    /* 1024px及以上 */
    @media (min-width: 1024px) {
      #data-view {
        .main-header {
          .title-container {
            font-size: 20px;
          }
        }
        .main-container {
          .m-top-container{
            .table-wrapper {
              :deep(.header-item){
                font-size: 14px;
              }
              :deep(.row-item){
                font-size: 14px;
              }
            }
          }
          .m-bot-container{
            .legend-area{
              .legend-item{
                .legend-color{
                  width: 20px;
                  height: 12px;
                  margin: 1px 2px;
                }
                .legend-name{
                  font-size: 14px;
                }
              }
            }
          }
        }
      }
    }

    /* 1180px及以上 */
    @media (min-width: 1180px) {
      #data-view {
        .main-header {
          .title-container {
            font-size: 22px;
          }
        }
        .main-container {
          .m-top-container{
            .table-wrapper {
              :deep(.header-item){
                font-size: 15px;
              }
              :deep(.row-item){
                font-size: 15px;
              }
            }
          }
          .m-bot-container{
            .legend-area{
              .legend-item{
                .legend-color{
                  width: 20px;
                  height: 12px;
                  margin: 1px 2px;
                }
                .legend-name{
                  font-size: 15px;
                }
              }
            }
          }
        }
      }
    }

    /* 1366px及以上 */
    @media (min-width: 1366px) {
      #data-view {
        .main-header {
          .title-container {
            font-size: 24px;
          }
        }
        .main-container {
          .m-top-container{
            .table-wrapper {
              :deep(.header-item){
                font-size: 16px;
              }
              :deep(.row-item){
                font-size: 16px;
              }
            }
          }
          .m-bot-container{
            .legend-area{
              .legend-item{
                .legend-color{
                  width: 20px;
                  height: 12px;
                  margin: 1px 2px;
                }
                .legend-name{
                  font-size: 16px;
                }
              }
            }
          }
        }
      }
    }

    /* 1500px及以上 */
    @media (min-width: 1500px) {
      #data-view {
        .main-header {
          .title-container {
            font-size: 26px;
          }
        }
        .main-container {
          .m-top-container{
            .table-wrapper {
              :deep(.header-item){
                font-size: 18px;
              }
              :deep(.row-item){
                font-size: 18px;
              }
            }
          }
          .m-bot-container{
            .legend-area{
              .legend-item{
                .legend-color{
                  width: 24px;
                  height: 14px;
                  margin: 1px 3px;
                }
                .legend-name{
                  font-size: 18px;
                }
              }
            }
          }
        }
      }
    }

    /* 1900px及以上 */
    @media (min-width: 1900px) {
      #data-view {
        .main-header {
          .title-container {
            font-size: 28px;
          }
        }
        .main-container {
          .m-top-container{
            .table-wrapper {
              :deep(.header-item){
                font-size: 20px;
              }
              :deep(.row-item){
                font-size: 20px;
              }
            }
          }
          .m-bot-container{
            .legend-area{
              .legend-item{
                .legend-color{
                  width: 30px;
                  height: 18px;
                  margin: 1px 5px;
                }
                .legend-name{
                  font-size: 20px;
                }
              }
            }
          }
        }
      }
    }
    /* 2400px及以上 */
    @media (min-width: 2400px) {
      #data-view {
        .main-header {
          .title-container {
            font-size: 28px;
          }
        }
        .main-container {
          .m-top-container{
            .table-wrapper {
              :deep(.header-item){
                font-size: 22px;
              }
              :deep(.row-item){
                font-size: 22px;
              }
            }
          }
          .m-bot-container{
            .legend-area{
              .legend-item{
                .legend-color{
                  width: 30px;
                  height: 18px;
                  margin: 1px 5px;
                }
                .legend-name{
                  font-size: 22px;
                }
              }
            }
          }
        }
      }
    }
</style>